<template>
  <div class="tem_child">
    <h3>孙组件A</h3>
    <p class="inject_data">{{provide1}}</p>
    <p>foo: {{ foo }}</p>
    <p>grandsonA的$attrs: {{ $attrs }}</p>
    <grandsonB v-bind="$attrs"  v-on="$listeners"></grandsonB>

  </div>
</template>

<script>
import grandsonB from "./grandsonB";
export default {
  name: "grandsonA",
  components:{
    grandsonB
  },
  inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
  props: {
    foo: String // foo作为props属性绑定
  },
  inject:['provide1'],
  created() {
    console.log('grandsonA',this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
    console.log('grandsonA $listeners',this.$listeners) // parentEvent: f
    let res=this.$listeners.parentEvent();
    console.log("grandsonA",res)
  }
}
</script>

<style scoped>
.inject_data {
  color: red;
}
</style>
